<template>
  <view class="pet-settings-container">
    <!-- 紧凑的页面头部 -->
    <view class="page-header">
      <text class="page-title">🐾 宠物设置</text>
      <button class="refresh-btn" @click="loadPetData">🔄</button>
    </view>
    
    <!-- 紧凑的宠物信息卡片 -->
    <view class="pet-info-card">
      <view class="pet-header">
        <view class="pet-avatar">
          <text class="pet-emoji">{{ petData.emoji }}</text>
        </view>
        <view class="pet-info">
          <text class="pet-name">{{ petData.name }}</text>
          <text class="pet-level">Lv.{{ petData.level }} | {{ petStatus }}</text>
        </view>
      </view>
      
      <!-- 紧凑的状态条 -->
      <view class="status-bars">
        <view class="status-bar">
          <text class="status-label">心情</text>
          <view class="progress-bar mood">
            <view class="progress-fill" :style="{ width: petData.mood + '%' }"></view>
          </view>
          <text class="status-value">{{ petData.mood }}%</text>
        </view>
        
        <view class="status-bar">
          <text class="status-label">饥饿</text>
          <view class="progress-bar hunger">
            <view class="progress-fill" :style="{ width: petData.hunger + '%' }"></view>
          </view>
          <text class="status-value">{{ petData.hunger }}%</text>
        </view>
        
        <view class="status-bar">
          <text class="status-label">精力</text>
          <view class="progress-bar energy">
            <view class="progress-fill" :style="{ width: petData.energy + '%' }"></view>
          </view>
          <text class="status-value">{{ petData.energy }}%</text>
        </view>
      </view>
    </view>
    
    <!-- 紧凑的设置区域 -->
    <view class="settings-grid">
      <!-- 基础设置卡片 -->
      <view class="settings-card">
        <text class="card-title">基础设置</text>
        
        <view class="setting-row">
          <text class="setting-label">名称</text>
          <input 
            class="compact-input"
            v-model="petData.name"
            placeholder="宠物名称"
            @blur="updatePetName"
          />
        </view>
        
        <view class="setting-row">
          <text class="setting-label">外观</text>
          <view class="emoji-selector-compact">
            <view 
              v-for="emoji in availableEmojis.slice(0, 5)" 
              :key="emoji"
              class="emoji-option-compact"
              :class="{ 'selected': petData.emoji === emoji }"
              @click="selectEmoji(emoji)"
            >
              <text class="emoji">{{ emoji }}</text>
            </view>
            <view class="more-emojis" @click="showAllEmojis">⋯</view>
          </view>
        </view>
        
        <view class="setting-row">
          <text class="setting-label">显示宠物</text>
          <switch 
            :checked="petData.isActive"
            @change="togglePetVisibility"
            color="#667eea"
          />
        </view>
      </view>
      
      
      <!-- 交互设置卡片 -->
      <view class="settings-card">
        <text class="card-title">交互设置</text>
        
        <view class="setting-row">
          <text class="setting-label">气泡</text>
          <switch 
            :checked="petSettings.showBubbles"
            @change="toggleShowBubbles"
            color="#667eea"
          />
        </view>
        
        <view class="setting-row">
          <text class="setting-label">语音</text>
          <switch 
            :checked="petSettings.voiceRecognition"
            @change="toggleVoiceRecognition"
            color="#667eea"
          />
        </view>
        
        <view class="setting-row">
          <text class="setting-label">音效</text>
          <switch 
            :checked="petSettings.soundEnabled"
            @change="toggleSound"
            color="#667eea"
          />
        </view>
      </view>
      
      <!-- 自动设置卡片 -->
      <view class="settings-card">
        <text class="card-title">自动设置</text>
        
        <view class="setting-row">
          <text class="setting-label">自动喂食</text>
          <switch 
            :checked="petSettings.autoFeed"
            @change="toggleAutoFeed"
            color="#667eea"
          />
        </view>
        
        <view class="setting-row">
          <text class="setting-label">自动玩耍</text>
          <switch 
            :checked="petSettings.autoPlay"
            @change="toggleAutoPlay"
            color="#667eea"
          />
        </view>
      </view>
      
      <!-- 成就系统 -->
      <view class="settings-section" v-if="petData.achievements.length > 0">
        <view class="section-header">
          <text class="section-title">成就</text>
        </view>
        
        <view class="achievements-grid">
          <view 
            v-for="achievement in petData.achievements" 
            :key="achievement"
            class="achievement-item"
          >
            <view class="achievement-icon">
              <text class="achievement-emoji">{{ getAchievementIcon(achievement) }}</text>
            </view>
            <view class="achievement-info">
              <text class="achievement-name">{{ getAchievementName(achievement) }}</text>
              <text class="achievement-desc">{{ getAchievementDesc(achievement) }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 数据管理 -->
      <view class="settings-section">
        <view class="section-header">
          <text class="section-title">数据管理</text>
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-name">导出数据</text>
            <text class="setting-desc">导出宠物数据到本地</text>
          </view>
          <button class="action-button export-btn" @click="exportPetData">导出</button>
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-name">导入数据</text>
            <text class="setting-desc">从本地导入宠物数据</text>
          </view>
          <button class="action-button import-btn" @click="importPetData">导入</button>
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-name">重置宠物</text>
            <text class="setting-desc">重置所有宠物数据</text>
          </view>
          <button class="action-button reset-btn" @click="resetPet">重置</button>
        </view>
      </view>
    </view>
    
    <!-- 快速操作 -->
    <view class="quick-actions">
      <button class="quick-btn" @click="quickFeed">🍽️ 喂食</button>
      <button class="quick-btn" @click="quickPlay">🎮 玩耍</button>
      <button class="quick-btn" @click="quickRest">😴 休息</button>
    </view>
  </view>
</template>

<script>
import desktopPetManager from '@/utils/desktop-pet-manager.js'

export default {
  name: 'PetSettings',
  data() {
    return {
      petData: {},
      petSettings: {},
      availableEmojis: ['🐱', '🐶', '🐰', '🐸', '🐧', '🦊', '🐨', '🐼', '🦄', '🐙'],
      isLoading: false
    }
  },
  
  computed: {
    petStatus() {
      return desktopPetManager.getPetStatusDescription()
    }
  },
  
  onLoad() {
    this.loadPetData()
    this.setupEventListeners()
  },
  
  onShow() {
    // 每次页面显示时重新加载数据
    this.loadPetData()
  },
  
  onUnload() {
    this.removeEventListeners()
  },
  
  methods: {
    // 加载宠物数据
    loadPetData() {
      try {
        const petData = desktopPetManager.getPetData()
        const petSettings = desktopPetManager.getPetSettings()
        
        console.log('加载宠物数据:', petData)
        console.log('加载宠物设置:', petSettings)
        
        this.petData = { ...petData }
        this.petSettings = { ...petSettings }
      } catch (error) {
        console.error('加载宠物数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'error'
        })
      }
    },
    
    // 设置事件监听
    setupEventListeners() {
      this.onPetDataUpdated = (data) => {
        this.petData = { ...data }
      }
      
      desktopPetManager.on('pet-data-updated', this.onPetDataUpdated)
    },
    
    // 移除事件监听
    removeEventListeners() {
      if (this.onPetDataUpdated) {
        desktopPetManager.off('pet-data-updated', this.onPetDataUpdated)
      }
    },
    
    // 更新宠物名称
    updatePetName() {
      console.log('更新宠物名称:', this.petData.name)
      desktopPetManager.updatePetData({ name: this.petData.name })
      this.loadPetData() // 重新加载数据
      uni.showToast({
        title: '名称已更新',
        icon: 'success'
      })
    },
    
    // 选择表情
    selectEmoji(emoji) {
      console.log('选择表情:', emoji)
      this.petData.emoji = emoji
      desktopPetManager.updatePetData({ emoji })
      this.loadPetData() // 重新加载数据
      uni.showToast({
        title: '表情已更换',
        icon: 'success'
      })
    },
    
    // 显示所有表情
    showAllEmojis() {
      uni.showActionSheet({
        itemList: this.availableEmojis,
        success: (res) => {
          const selectedEmoji = this.availableEmojis[res.tapIndex]
          this.selectEmoji(selectedEmoji)
        }
      })
    },
    
    // 切换宠物可见性
    togglePetVisibility(e) {
      const isActive = e.detail.value
      console.log('切换宠物可见性:', isActive)
      this.petData.isActive = isActive
      desktopPetManager.updatePetData({ isActive })
      this.loadPetData() // 重新加载数据
      
      uni.showToast({
        title: isActive ? '宠物已显示' : '宠物已隐藏',
        icon: 'success'
      })
    },
    
    // 切换显示气泡
    toggleShowBubbles(e) {
      const showBubbles = e.detail.value
      console.log('切换显示气泡:', showBubbles)
      this.petSettings.showBubbles = showBubbles
      desktopPetManager.updatePetSettings({ showBubbles })
      this.loadPetData() // 重新加载数据
      
      uni.showToast({
        title: showBubbles ? '气泡已开启' : '气泡已关闭',
        icon: 'success'
      })
    },
    
    // 切换语音识别
    toggleVoiceRecognition(e) {
      const voiceRecognition = e.detail.value
      console.log('切换语音识别:', voiceRecognition)
      this.petSettings.voiceRecognition = voiceRecognition
      desktopPetManager.updatePetSettings({ voiceRecognition })
      this.loadPetData() // 重新加载数据
      
      uni.showToast({
        title: voiceRecognition ? '语音识别已开启' : '语音识别已关闭',
        icon: 'success'
      })
    },
    
    // 切换音效
    toggleSound(e) {
      const soundEnabled = e.detail.value
      console.log('切换音效:', soundEnabled)
      this.petSettings.soundEnabled = soundEnabled
      desktopPetManager.updatePetSettings({ soundEnabled })
      this.loadPetData() // 重新加载数据
      
      uni.showToast({
        title: soundEnabled ? '音效已开启' : '音效已关闭',
        icon: 'success'
      })
    },
    
    // 切换自动喂食
    toggleAutoFeed(e) {
      const autoFeed = e.detail.value
      this.petSettings.autoFeed = autoFeed
      desktopPetManager.updatePetSettings({ autoFeed })
      
      uni.showToast({
        title: autoFeed ? '自动喂食已开启' : '自动喂食已关闭',
        icon: 'success'
      })
    },
    
    // 切换自动玩耍
    toggleAutoPlay(e) {
      const autoPlay = e.detail.value
      this.petSettings.autoPlay = autoPlay
      desktopPetManager.updatePetSettings({ autoPlay })
      
      uni.showToast({
        title: autoPlay ? '自动玩耍已开启' : '自动玩耍已关闭',
        icon: 'success'
      })
    },
    
    // 快速喂食
    quickFeed() {
      const result = desktopPetManager.feedPet()
      console.log('快速喂食结果:', result)
      this.loadPetData() // 重新加载数据
      if (result.success) {
        uni.showToast({
          title: result.message,
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: result.message,
          icon: 'none'
        })
      }
    },
    
    // 快速玩耍
    quickPlay() {
      const result = desktopPetManager.playWithPet()
      console.log('快速玩耍结果:', result)
      this.loadPetData() // 重新加载数据
      if (result.success) {
        uni.showToast({
          title: result.message,
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: result.message,
          icon: 'none'
        })
      }
    },
    
    // 快速休息
    quickRest() {
      const result = desktopPetManager.restPet()
      console.log('快速休息结果:', result)
      this.loadPetData() // 重新加载数据
      if (result.success) {
        uni.showToast({
          title: result.message,
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: result.message,
          icon: 'none'
        })
      }
    },
    
    // 导出宠物数据
    exportPetData() {
      try {
        const data = desktopPetManager.exportPetData()
        const dataStr = JSON.stringify(data, null, 2)
        
        // 创建下载链接
        const blob = new Blob([dataStr], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        
        // 在移动端，使用uni.saveFile
        if (uni.saveFile) {
          uni.saveFile({
            tempFilePath: url,
            success: (res) => {
              uni.showToast({
                title: '导出成功',
                icon: 'success'
              })
            }
          })
        } else {
          // PC端直接下载
          const link = document.createElement('a')
          link.href = url
          link.download = `pet-data-${Date.now()}.json`
          link.click()
          
          uni.showToast({
            title: '导出成功',
            icon: 'success'
          })
        }
      } catch (error) {
        console.error('导出失败:', error)
        uni.showToast({
          title: '导出失败',
          icon: 'error'
        })
      }
    },
    
    // 导入宠物数据
    importPetData() {
      uni.chooseFile({
        count: 1,
        type: 'file',
        success: (res) => {
          const filePath = res.tempFilePaths[0]
          
          uni.getFileSystemManager().readFile({
            filePath: filePath,
            encoding: 'utf8',
            success: (fileRes) => {
              try {
                const data = JSON.parse(fileRes.data)
                const success = desktopPetManager.importPetData(data)
                
                if (success) {
                  this.loadPetData()
                  uni.showToast({
                    title: '导入成功',
                    icon: 'success'
                  })
                } else {
                  uni.showToast({
                    title: '导入失败，数据格式错误',
                    icon: 'error'
                  })
                }
              } catch (error) {
                console.error('解析文件失败:', error)
                uni.showToast({
                  title: '文件格式错误',
                  icon: 'error'
                })
              }
            },
            fail: (error) => {
              console.error('读取文件失败:', error)
              uni.showToast({
                title: '读取文件失败',
                icon: 'error'
              })
            }
          })
        }
      })
    },
    
    // 重置宠物
    resetPet() {
      uni.showModal({
        title: '确认重置',
        content: '确定要重置宠物数据吗？此操作不可恢复！',
        success: (res) => {
          if (res.confirm) {
            desktopPetManager.resetPetData()
            this.loadPetData()
            uni.showToast({
              title: '宠物已重置',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 获取成就图标
    getAchievementIcon(achievement) {
      const icons = {
        'interaction_master': '🎯',
        'level_5': '⭐',
        'happy_pet': '😊'
      }
      return icons[achievement] || '🏆'
    },
    
    // 获取成就名称
    getAchievementName(achievement) {
      const info = desktopPetManager.getAchievementInfo(achievement)
      return info ? info.name : '未知成就'
    },
    
    // 获取成就描述
    getAchievementDesc(achievement) {
      const info = desktopPetManager.getAchievementInfo(achievement)
      return info ? info.description : '未知描述'
    }
  }
}
</script>

<style scoped>
.pet-settings-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20rpx;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.header-content {
  text-align: center;
}

.page-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 8rpx;
}

.page-subtitle {
  display: block;
  font-size: 24rpx;
  color: #636e72;
}

.refresh-btn {
  margin-top: 10rpx;
  padding: 8rpx 16rpx;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 20rpx;
  font-size: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: #5a6fd8;
  transform: scale(1.05);
}

.refresh-btn:active {
  transform: scale(0.95);
}

/* 宠物信息卡片 */
.pet-info-card {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.pet-avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.pet-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
}

.pet-emoji {
  font-size: 50rpx;
}

.pet-basic-info {
  flex: 1;
}

.pet-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 6rpx;
}

.pet-level {
  display: block;
  font-size: 22rpx;
  color: #667eea;
  margin-bottom: 3rpx;
}

.pet-status {
  display: block;
  font-size: 20rpx;
  color: #636e72;
}

/* 状态条 */
.status-bars {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.status-bar {
  display: flex;
  align-items: center;
}

.status-label {
  font-size: 22rpx;
  color: #666;
  width: 70rpx;
}

.progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0 12rpx;
}

.progress-bar {
  flex: 1;
  height: 14rpx;
  background: #e0e0e0;
  border-radius: 7rpx;
  overflow: hidden;
  margin-right: 10rpx;
}

.progress-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s ease;
}

.progress-bar.mood .progress-fill {
  background: linear-gradient(90deg, #ff6b6b, #4caf50);
}

.progress-bar.hunger .progress-fill {
  background: linear-gradient(90deg, #ff9800, #4caf50);
}

.progress-bar.energy .progress-fill {
  background: linear-gradient(90deg, #42a5f5, #4caf50);
}

.status-value {
  font-size: 18rpx;
  color: #666;
  width: 50rpx;
  text-align: right;
}

/* 设置区域 */
.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.settings-section {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: white;
}

.section-subtitle {
  display: block;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4rpx;
}

/* 设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  margin-right: 15rpx;
}

.setting-name {
  display: block;
  font-size: 26rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 3rpx;
}

.setting-desc {
  display: block;
  font-size: 20rpx;
  color: #636e72;
}

.setting-input {
  padding: 10rpx 12rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 22rpx;
  width: 180rpx;
}

/* 表情选择器 */
.emoji-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.emoji-option {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.emoji-option.selected {
  background: #667eea;
  border-color: #4a69bd;
}

.emoji {
  font-size: 28rpx;
}

/* 操作按钮 */
.action-button {
  padding: 12rpx 20rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 22rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.export-btn {
  background: #4caf50;
  color: white;
}

.import-btn {
  background: #2196f3;
  color: white;
}

.reset-btn {
  background: #f44336;
  color: white;
}

.action-button:active {
  transform: scale(0.95);
}

/* 成就网格 */
.achievements-grid {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200rpx, 1fr));
  gap: 16rpx;
}

.achievement-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  border-left: 4rpx solid #667eea;
}

.achievement-icon {
  margin-right: 12rpx;
}

.achievement-emoji {
  font-size: 32rpx;
}

.achievement-info {
  flex: 1;
}

.achievement-name {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 4rpx;
}

.achievement-desc {
  display: block;
  font-size: 20rpx;
  color: #636e72;
}

/* 快速操作 */
.quick-actions {
  display: flex;
  gap: 12rpx;
  margin-top: 15rpx;
  padding: 0 10rpx;
}

.quick-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx;
  background: white;
  border: none;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.quick-action-btn:active {
  transform: scale(0.95);
}

.feed-btn {
  border-top: 3rpx solid #ff9800;
}

.play-btn {
  border-top: 3rpx solid #4caf50;
}

.rest-btn {
  border-top: 3rpx solid #2196f3;
}

.action-icon {
  font-size: 32rpx;
  margin-bottom: 6rpx;
}

.action-text {
  font-size: 20rpx;
  color: #666;
  font-weight: bold;
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .pet-settings-container {
    padding: 10rpx;
  }
  
  .page-header {
    padding: 20rpx;
    margin-bottom: 15rpx;
  }
  
  .page-title {
    font-size: 32rpx;
  }
  
  .page-subtitle {
    font-size: 22rpx;
  }
  
  .pet-info-card {
    padding: 20rpx;
    margin-bottom: 15rpx;
  }
  
  .pet-avatar-section {
    flex-direction: column;
    text-align: center;
    margin-bottom: 15rpx;
  }
  
  .pet-avatar {
    margin-right: 0;
    margin-bottom: 10rpx;
    width: 70rpx;
    height: 70rpx;
  }
  
  .pet-emoji {
    font-size: 45rpx;
  }
  
  .pet-name {
    font-size: 28rpx;
  }
  
  .pet-level {
    font-size: 22rpx;
  }
  
  .pet-status {
    font-size: 20rpx;
  }
  
  .settings-sections {
    gap: 15rpx;
  }
  
  .settings-section {
    margin-bottom: 15rpx;
  }
  
  .section-header {
    padding: 15rpx 20rpx;
  }
  
  .section-title {
    font-size: 26rpx;
  }
  
  .setting-item {
    padding: 18rpx 20rpx;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .setting-info {
    margin-right: 0;
    margin-bottom: 12rpx;
    width: 100%;
  }
  
  .setting-name {
    font-size: 26rpx;
  }
  
  .setting-desc {
    font-size: 20rpx;
  }
  
  .setting-input {
    width: 100%;
    font-size: 22rpx;
    padding: 10rpx 12rpx;
  }
  
  .emoji-selector {
    gap: 8rpx;
  }
  
  .emoji-option {
    width: 50rpx;
    height: 50rpx;
  }
  
  .emoji {
    font-size: 28rpx;
  }
  
  .action-button {
    padding: 10rpx 16rpx;
    font-size: 20rpx;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
    padding: 15rpx;
    gap: 12rpx;
  }
  
  .achievement-item {
    padding: 12rpx;
  }
  
  .achievement-emoji {
    font-size: 28rpx;
  }
  
  .achievement-name {
    font-size: 22rpx;
  }
  
  .achievement-desc {
    font-size: 18rpx;
  }
  
  .quick-actions {
    flex-direction: row;
    gap: 12rpx;
    margin-top: 15rpx;
    padding: 0 10rpx;
  }
  
  .quick-action-btn {
    padding: 15rpx 10rpx;
  }
  
  .action-icon {
    font-size: 32rpx;
    margin-bottom: 6rpx;
  }
  
  .action-text {
    font-size: 20rpx;
  }
  
  .status-bars {
    gap: 10rpx;
  }
  
  .status-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6rpx;
  }
  
  .status-label {
    width: auto;
    font-size: 20rpx;
  }
  
  .progress-container {
    width: 100%;
    margin: 0;
  }
  
  .progress-bar {
    height: 12rpx;
  }
  
  .status-value {
    font-size: 16rpx;
    width: auto;
  }
}
</style>
